<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- 引入字体图标的文件-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            background-color: beige;
        }
        /*标题*/
        
        figcaption {
            text-align: center;
            line-height: 150px;
            font-family: "Microsoft Yahei";
            font-size: 24px;
        }
        /* 播放器*/
        
        .palyer {
            width: 750px;
            height: 400px;
            margin: 10px auto;
            border: 1px solid #000;
            position: relative;
            border-radius: 20px 20px 0px 0px;
        }
        
        .palyer video {
            height: 100%;
            display: block;
            border: 2px solid rgb(199, 190, 190);
            margin: 0 auto;
            /* display: none; */
        }
        /* 控制条*/
        
        .controls {
            width: 706px;
            height: 40px;
            background-color: gainsboro;
            position: absolute;
            /* bottom: 0px; */
            left: 21px;
            /* border-radius: 5px 5px 0px 0px; */
        }
        /*开关*/
        
        #span {
            position: absolute;
            width: 20px;
            height: 20px;
            left: 10px;
            top: 10px;
            text-align: center;
            line-height: 20px;
            color: black;
        }
        /*进度条*/
        
        .progress {
            width: 432px;
            height: 10px;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.4);
            left: 35px;
            top: 15px;
            border-radius: 4px;
            overflow: hidden;
        }
        /* 当前进度*/
        
        .curr-progress {
            width: 0%;
            height: 10px;
            background-color: rgb(168, 197, 37);
        }
        /* 时间模块*/
        
        .time {
            width: 120px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            color: rgb(8, 8, 8);
            position: absolute;
            left: 466px;
            top: 10px;
            font-size: 12px;
        }
        
        .glyphicon-backward {
            text-align: center;
            line-height: 20px;
            color: #000;
            position: absolute;
            left: 591px;
            top: 10px;
            font-size: 12px;
        }
        
        .glyphicon-forward {
            text-align: center;
            line-height: 20px;
            color: #000;
            position: absolute;
            left: 637px;
            top: 10px;
            font-size: 12px;
        }
        /*全屏*/
        
        #full-screen {
            position: absolute;
            width: 20px;
            height: 20px;
            right: 20px;
            top: 10px;
            text-align: center;
            line-height: 20px;
            color: yellow;
        }
        /* 播放器按钮框 */
        
        #btn_container {
            width: 750px;
            height: 40px;
            background-color: rgb(177, 173, 173);
            border-radius: 0px 0px 20px 20px;
        }
    </style>
</head>

<body>
    <!--播放器-->
    <figure>
        <!--  标题-->
        <figcaption id="figcaption">HTML5定制播放器</figcaption>
        <div class="palyer">
            <video>
                <source src="videoplayback.mp4" type="video/mp4">
            </video>
            <!-- 控制条-->
            <div class="controls">
                <!-- 播放暂停-->
                <span class="glyphicon glyphicon-play" id="span"></span>
                <div class="progress">
                    <!-- 当前进度-->
                    <div class="curr-progress"></div>
                </div>
                <!-- 时间-->
                <div class="time">
                    <span class="curr-time">00:00:00</span>/<span class="total-time">00:00:00</span>
                </div>
                <div class="processing">
                    <span class="glyphicon glyphicon-backward"></span>
                    <span class="glyphicon glyphicon-forward"></span>
                </div>
                <!-- 全屏-->
                <span class="glyphicon glyphicon-fullscreen" id="full-screen"></span>
            </div>
            <!-- 播放器按钮框 -->
            <div id="btn_container">

            </div>
        </div>
    </figure>
    <!-- note -->
    <!-- figure标签:
<figure> 元素代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用,
     并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。
    这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
-->


    <script>
        // 思路：
        /*
         * 1、点击按钮 实现播放暂停并且切换图标
         * 2、算出视频的总时显示出出来
         * 3、当视频播放的时候，进度条同步，当前时间同步
         * 4、点击实现全屏
         */

        //        获取需要的标签
        var video = document.querySelector('video');
        //          播放按钮
        var playBtn = document.querySelector('#span');
        //          当前进度条
        var currProgress = document.querySelector('.curr-progress');
        //          当前时间
        var currTime = document.querySelector('.curr-time');
        //          总时间
        var totalTime = document.querySelector('.total-time');
        //          后退
        var backward = document.querySelector('.glyphicon-backward');
        //          快进
        var forward = document.querySelector('.glyphicon-forward');
        //          全屏
        var extend = document.querySelector('#full-screen');

        var tTime = 0;

        //         1、点击按钮 实现播放暂停并且切换图标

        playBtn.onclick = function() {
            //               如果视频播放 就暂停，如果暂停 就播放
            if (video.paused) {
                //                   播放
                video.play();
                //切换图标
                playBtn.className = "glyphicon glyphicon-pause"
                    // this.classList.remove('glyphicon glyphicon-play');
                    // this.classList.add('glyphicon glyphicon-pause');
            } else {
                //                   暂停
                video.pause();
                //                   切换图标
                playBtn.className = "glyphicon glyphicon-play"
                    // this.classList.remove('glyphicon glyphicon-pause');
                    // this.classList.add('icon-play');
            }
        }

        //        2、算出视频的总时显示出出来
        //        当时加载完成后的事件，视频能播放的时候
        video.oncanplay = function() {
                //             获取视频总时长
                tTime = video.duration;
                // console.log(tTime);

                //          将总秒数 转换成 时分秒的格式：00：00:00
                //            小时
                var h = Math.floor(tTime / 3600);
                //            分钟
                var m = Math.floor(tTime % 3600 / 60);
                //            秒
                var s = Math.floor(tTime % 60);

                //            console.log(h);
                //            console.log(m);
                //            console.log(s);

                //            把数据格式转成 00:00：00
                h = h >= 10 ? h : "0" + h;
                m = m >= 10 ? m : "0" + m;
                s = s >= 10 ? s : "0" + s;


                // console.log(h);
                // console.log(m);
                // console.log(s);
                //            显示出来
                totalTime.innerHTML = h + ":" + m + ":" + s;
            }
            //   * 3、当视频播放的时候，进度条同步，当前时间同步
            //         当时当前时间更新的时候触发
        video.ontimeupdate = function() {
            //            获取视频当前播放的时间
            // console.log(video.currentTime);
            //            当前播放时间
            var cTime = video.currentTime;
            //           把格式转成00:00:00

            var h = Math.floor(cTime / 3600);
            //            分钟
            var m = Math.floor(cTime % 3600 / 60);
            //            秒
            var s = Math.floor(cTime % 60);

            //            把数据格式转成 00:00：00
            h = h >= 10 ? h : "0" + h;
            m = m >= 10 ? m : "0" + m;
            s = s >= 10 ? s : "0" + s;

            //            显示出当前时间
            currTime.innerHTML = h + ":" + m + ":" + s;

            //            改变进度条的宽度： 当前时间/总时间
            var value = cTime / tTime;

            currProgress.style.width = value * 100 + "%";

        }

        //        后退
        backward.onclick = function() {
            var currTime = video.currentTime - 5;
            // console.log(currTime);
            video.currentTime = currTime;

        }

        //        快进
        forward.onclick = function() {
            var currTime = video.currentTime + 5;
            // console.log(currTime);
            video.currentTime = currTime;
        }

        //        全屏
        extend.onclick = function() {
            //            全屏的h5代码
            video.webkitRequestFullScreen();
        }
    </script>
</body>

</html>